<template>
	<view class="app">
		<view class="search">
			<uni-search-bar :radius="100" placeholder="搜索社区" @confirm="navRouter(`./searchResult/searchResult?communityName=${$event.value}`)" bgColor="#ffffff"></uni-search-bar>
		</view>
		<view class="list">
			<view class="list-div">

				<view class="list-card" v-for="(item,index) in pollingList" :key="index">
					<view class="" @click="navRouter(`./details?id=${item.communityId}&title=${item.communityName}`)">
						<image :src="item.communityLogo" mode=""></image>
					</view>

					<view class="list-name">
						<view>
							{{item.communityName}}
							<view class="faultIcon" v-if="item.isFault == 1">
								<image src="../../../static/img/polling/fault.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 底部导航栏 -->
		
		<!-- #ifdef H5 -->
		  <!-- <Tabber class="bottom" :select="select" /> -->
		<!-- #endif -->
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import polling from "@/serve/api/polling.js";
	import Tabber from "../../../components/bottom.vue"
	export default {
		components: {
			uniSearchBar,
			Tabber
		},
		data() {
			return {
				select:1,
				pollingList: [],
				getListFlag: true,
				pageNum: 1,
			}
		},
		onLoad() {
			this.getpollingList();
		},
		methods: {
			async getpollingList() {
				let parme = {
					pageNum: this.pageNum,
					pageSize: 10,
				}
				const res = await polling.findCommunityByToken(parme)
				if (res.data.data.list.length < 10) {
					this.getListFlag = false;
				}
				this.pollingList.push(...res.data.data.list)
			},

	

		},
		onReachBottom(e) {
			if (this.getListFlag) {
				this.pageNum = this.pageNum + 1;
				this.getpollingList();
			}

		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	page {
		width: 750rpx;
		background: #EFF2F5;
	}

	view {
		font-size: 28rpx;
		line-height: 1.8;

	}
	.bottom{
		position: fixed;
		bottom: 0;
		z-index: 9999;
	}
	.app {}

	/* 搜索框 */
	.search {
		height: 80rpx;
		margin: 20rpx;
		background-color: #EFF2F5;
	}

	.uni-searchbar[data-v-64ee3838] {
		background-color: #EFF2F5;
	}

	/* 列表 */
	.list {
		width: 750rpx;
		margin: 0 auto;
	}

	.list-div {
		width: 700rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		margin: 0 auto;

	}

	.list-card {
		width: 320rpx;
		height: 400rpx;
		background: #FFFFFF;
		margin: 18rpx 0;
		/* margin-top: 30rpx; */

	}

	.list-card:nth-child(odd) {
		margin-right: 0;
	}

	.list-card image {
		width: 320rpx;
		height: 320rpx;
		vertical-align: middle;
	}

	.list-card view {
		// margin: 0 15rpx;
		font-size: 30rpx;
		color: #323232;
	}

	.list-name {
		width: 320rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.list-name view {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #323232;
		margin-right: 10rpx;
		margin-left: 20rpx;
	}

	.faultIcon {

		height: 29rpx;

	}

	.faultIcon image {
		width: 24rpx;
		height: 24rpx;
		vertical-align: middle;
	}
</style>
